<!-- 
基本选择器
    1）标签
        - 按标签名（元素名）分类
        - 统一管理页面中所有的、某一类型的标签元素
        - 优缺：只能统一
    2）类
        - .符号
        - 优缺：可以差异化，即单个、多个
        - 1:1，一个类名对应一个标签  div-class="test"
        - 1:n，一个类名对应多个标签  div-class="test"  li-class="test"
        - n:1，多个类名对应一个标签  div-class="test nav news"
        - n:n，多个类名对应多个标签  div-class="test nav" li-class="test nav news"
    3）ID
        - #符号
        - 根据id号选取，具有唯一性（不要重用ID）
    4）通配符
        - *符号
        - 表示页面上所有标签元素（html、body等）
        - 直接定义即可执行生效，不用特意给某个标签添加上才生效

拓展：
    a、更加精确的形式（多用于类名选择器）
        元素.类名   div.test还是li.test
        元素#ID名   基本没用，毕竟ID是唯一的
    b、自定义名字
        长名字用-连接
        data-index
    c、id和类的区别
        id是身份证号，不可重用
        类是人名，可以重用
-->

<style>
    * {
        background-color: gray;
        color: white;
    }
    div {
        color: red;
    }
    .t {
        color: blue;
    }
    .test {
        color: orange;
    }
    #myId {
        color: cyan;
    }
</style>

<div>测试001</div>
<div>测试002</div>
<div>测试003</div>

<ul>
    <li class="t">测试100</li>
    <li>测试200</li>
    <li>测试300</li>
</ul>

<ol>
    <li id="myId">测试400</li>
    <li>测试500</li>
</ol>

<dl>
    <dt class="test">测试1</dt>
    <dd>1111</dd>
    <dd>1111</dd>
    <dd>1111</dd>
    <dt class="test">测试2</dt>
    <dd>2222</dd>
    <dd>2222</dd>
</dl>